<template>
  <PageLayout>
    <div class="table-box">
      <div class="head-box">
        <div class="title">套餐列表</div>
        <!-- <a-space :size="16">
          <a-button type="primary" @click="edit()">参数图片设置</a-button>
        </a-space> -->
        <a-space :size="16">
          <a-button  @click="add()">新建</a-button>
          <!-- <a-button type="primary" @click="refresh">刷新设备</a-button> -->
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable ref="tableRef" :columns="columns" :query-params="queryData" :apiFetch="postMultiplePackagePage">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <div class="d-flex a-center">
                <div>
                  {{ record.name }}
                </div>
                <edit-outlined @click="edit(record, 'name')" />
              </div>
            </template>
            <template v-if="column.key === 'content'">
              <div class="d-flex a-center">
                <div>
                  {{ record.content }}
                </div>
                <edit-outlined @click="edit(record, 'content')" />
              </div>
            </template>
            <template v-if="column.key === 'payFee'">
              <div class="d-flex a-center">
                <div>
                  {{ record.payFee }}
                </div>
                <edit-outlined @click="edit(record, 'payFee')" />
              </div>
            </template>

            <template v-if="column.key === 'packageId'">
              <div class="d-flex a-center">
                <div>
                  {{ packageOptions && packageOptions.find(item => item.id == record.packageId)?.name }}
                </div>
                <edit-outlined @click="edit(record, 'packageId')" />
              </div>
            </template>
            <template v-if="column.key === 'totalNum'">
              <div class="d-flex a-center">
                <div>
                  {{ record.totalNum }}
                </div>
                <edit-outlined @click="edit(record, 'totalNum')" />
              </div>
            </template>

            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="remove(record.id)">删除</a>
              </a-space>
            </template>

          </template>
        </BasicTable>
      </div>
    </div>
    <ConsumeModal :packageType="1" ref="cusumeModalRef" :data="dataDetail" :type="type" @ok="tableRef.fetch()"></ConsumeModal>
  </PageLayout>
</template>

<script name="package-multiple" setup>
import ConsumeModal from "./components/consume-modal.vue";
import { postMultiplePackagePage, postSinglePackageList, postPackageMultipleDelete,postDeviceRefresh } from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "套餐名称",
    dataIndex: "name",
    key: "name",
    width: "150px",
    ellipsis: true,
  },

  {
    title: "套餐描述",
    dataIndex: "content",
    key: "content",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "绑定套餐",
    dataIndex: "packageId",
    key: "packageId",
    width: "150px",
    ellipsis: true,
    // customRender: ({ record }) => {
    //   packageOptions.value && packageOptions.value.find(item => item.id == record.packageId)[0]?.name
    // },
  },
  {
    title: "金额",
    dataIndex: "payFee",
    key: "payFee",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "使用次数",
    dataIndex: "totalNum",
    key: "totalNum",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 100,
  },
  // {
  //   title: "消耗量",
  //   dataIndex: "consume",
  //   key: "consume",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "参数",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },


];
const packageOptions = ref([])
onMounted(() => {
  postSinglePackageList().then(res => {
    packageOptions.value = res.data?.map(item => {
      return {
        ...item,
        label: item.name,
        value: item.id,
      }
    })
  })
})
const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};
const type = ref("");
const dataDetail = ref({});
const cusumeModalRef = ref(null);
const edit = (record, val) => {
  console.log(33);
  dataDetail.value = record;
  type.value = val;
  setTimeout(() => {
    cusumeModalRef.value.visible = true;
  }, 0);
};
const add = (record, val) => {
  router.push({
    path: '/package/edit'
  })
};
// const refresh = (record, val) => {
//   postDeviceRefresh().then(res => {
//     tableRef.value.refreshTableData();
//   })
// };

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);

// import { comfirmModal } from "@/hooks/useModal";
// import { message } from "ant-design-vue";
const remove = (id) => {
  comfirmModal({
    content: "确认删除该套餐卡",
    onOk() {
      postPackageMultipleDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};
</script>

<style lang="less" scoped></style>
